<!DOCTYPE html>
<html lang="en">

<head>
    {% block head %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}购物商城</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/animate.min.css">
    <link rel="stylesheet/less" href="/static/css/reset.less">
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <link rel="stylesheet/less" href="/static/css/index.less">
    <link rel="stylesheet/less" href="/static/css/common.less">
    {% endblock %}
</head>

<body>
    <div class="box">
        <div><img class="tabimg" src="/static/img/tab.png"></div>

        <header>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">您好，欢迎您！</a>
                        </div>


                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                {% if session['logged_in'] %}
                                  <li class="nav-item">
                                    <a class="nav-link" href="/login">欢迎{{session['username']}}登录</a>
                                  </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="/logout">退出</a>
                                  </li>
                               {% else %}
                                      <!-- Dropdown -->
                                  <li class="nav-item">
                                    <a class="nav-link" href="/login">登录</a>
                                  </li>
                                  <li class="nav-item">
                                    <a class="nav-link" href="/register">注册</a>
                                  </li>
                              {% endif %}
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">我的订单</a></li>
                                {% if session['logged_in'] %}
                                <li class="line">|</li>
                                <li><a href="/bashboard">商品管理</a></li>
                                <li class="line">|</li>
                                <li><a href="/show">商品可视化</a></li>
                                {% endif %}
                                <li class="line">|</li>
                                <li><a href="#">微博</a></li>
                                <li class="line">|</li>
                                <li><a href="#">微信</a></li>
                                <li class="line">|</li>
                                <li><a href="#">收藏本网站</a></li>
                                <li class="line">|</li>
                                <li><a href="#">购物指南</a></li>
                                <li class="line">|</li>
                                <li><a href="#">服务热线 0585-88888888</a></li>
                                <li class="line">|</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <div class="gg">
            <div class="logo">LOGO</div>
            <div class="gg-r">
                <div>
                    <form class="search">
                        <div class="ipt"><img src="/static/img/search_06.png"><input type="text" name="chk" id="chk"></div>
                        <input type="submit" value="搜索">
                    </form>
                    <span>热搜商品：洗衣服 拖把 洗衣液 纸巾</span>
                </div>
                <div class="line"></div>
                <div class="myshop"><img src="/static/img/logo1.png">我的购物车(0)</div>
            </div>
        </div>
        <div class="content">
            <div class="tab">
                <div class="tab-title">商品分类</div>
                <ul class="tab-content">
                    <li class="sy"><a href="/">首页</a> </li>
                     {% for cate in categorys %}
                        <li><a href="#"> {{ cate.cname }}</a></li>
                        <div class="tab-line"></div>
                    {% endfor %}
                </ul>
            </div>

{% block main %}
            <div class="swipercontent">
                <div class="swiper-tab">
                    <div class="tab-item">
                        <div class="item-title"> <span>不锈钢系列</span>><span></span> </div>
                        <ul class="item-content">
                            <li>钢盆类</li>
                            <li>塑料杯类</li>
                            <li>凳类</li>
                            <li>衣架类</li>
                            <li>果篮类</li>
                            <li>纸筒类</li>
                        </ul>
                    </div>
                    <div class="tab-item">
                        <div class="item-title"> <span>不锈钢系列</span>><span></span> </div>
                        <ul class="item-content">
                            <!--    果篮类  纸筒类  塑料杯类 塑料桶类  瓶类  凳类 衣架类  储物柜类  其他 副本   -->
                            <li>果篮类</li>
                            <li>纸筒类</li>
                            <li>塑料杯类</li>
                            <li>钢盆类</li>
                            <li>塑料桶类</li>
                            <li>其他</li>
                        </ul>
                    </div>
                    <div class="tab-item">
                        <div class="item-title"> <span>不锈钢系列</span>><span></span> </div>
                        <ul class="item-content">
                            <li>钢盆类</li>
                            <li>凳类</li>
                            <li>钢盆类</li>
                            <li>纸筒类</li>
                            <li>凳类</li>
                            <li>衣架类</li>
                            <li>储物柜类</li>
                            <li>其他</li>
                        </ul>
                    </div>
                    <div class="tab-item">
                        <div class="item-title"> <span>不锈钢系列</span>><span></span> </div>
                        <ul class="item-content">
                            <li>钢盆类</li>
                            <li>钢盆类</li>
                            <li>凳类</li>
                            <li>衣架类</li>
                            <li>储物柜类</li>
                            <li>其他</li>
                        </ul>
                    </div>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="/static/img/pic.png"></div>
                        <div class="swiper-slide"><img src="/static/img/pic2.jpg"></div>
                        <div class="swiper-slide"><img src="/static/img/pic3.jpg"></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <div class="disthing">
            <div class="dis-tab">
                <span>限时特价商品</span><span>MORE >></span>
            </div>
            <div class="dis-content">
            {% for one_product in products %}
                <div class="item">
                    <img class="item-img" src="{{ one_product.images }}">
                    <div class="item-content">
                        <h5>产品名</h5>
                        <h6>{{ one_product.pname }}</h6>
                        <div class="price">
                            <div class="old-price">原价:￥{{ one_product.old_price }}元</div>
                            <div class="new-price">优惠:￥{{ one_product.new_price }}元</div>
                        </div>
                        <button class="item-ipt">马上购买</button>
                    </div>
                </div>
            {% endfor %}
            </div>
        </div>
        <div class="cl"><img src="/static/img/pro.png"></div>
        <div class="more">
            <div class="fk">
                <div class="fk-title">最新订单</div>
                <div class="fk-content">
                    <div class="dd">
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                        <div class="dd-item">
                            <div title="testuser(安庆)81分钟前购" class="dd-time">testuser(安庆)81分钟前购</div>
                            <div title="倍之味 特鲜炼奶起士饼 台湾特之味 特" class="dd-info">倍之味 特鲜炼奶起士饼 台湾特之味 特</div>
                        </div>
                    </div>
                    <div class="fk-img"><img src="/static/img/dd_14.png" alt=""></div>
                </div>
            </div>
            <div class="gs">
                <div class="gs-imgs">
                    <img class="img" src="/static/img/q1.png">
                    <img class="img" src="/static/img/q2.png">
                    <img class="img" src="/static/img/q3.png">
                    <img class="img" src="/static/img/q4.png">
                </div>
                <div class="gs-info">
                    <div class="info-title">公司起源</div>
                    <div>
                        起源公司起源公司起源公司起源公司起源，公司起源公司起源公司起源公司起源公司起源公司起源，公司起源公司起源公司起源公司起源公司起源，公司起源公司起源公司起源公司起源，公司起源公司起源公司起源，公司起源公司起源公司起源，公司起源公司起源，公司起源公司起源
                    </div>
                    <div class="info-btn"><button>了解更多>></button></div>
                </div>
            </div>
            <div class="news">
                <div class="news-title"> <span>时事新闻</span><span>MORE >></span></div>
                <div class="news-content">
                    <div class="news-top">
                        <img class="top-img" src="/static/img/xw.png">
                        <div class="top-content">
                            <h5>时事新闻时事</h5>
                            <span>从今年9月中旬至12月底，我市城区LED路灯改造项目承担单位市城管局，将组织开展为期3个月的城区LED路灯改造工作。</span>
                        </div>
                    </div>
                    <div class="news-more">
                        <div class="more-item">
                            <span>时事新闻时事新闻时事新闻时事</span><span class="news-time">【2014-09-18】</span>
                        </div>
                        <div class="more-item">
                            <span>时事新闻时事新闻时事新闻时事</span><span class="news-time">【2014-09-18】</span>
                        </div>

                        <div class="more-item">
                            <span>时事新闻时事新闻时事新闻时事</span><span class="news-time">【2014-09-18】</span>
                        </div>
                        <div class="more-item">
                            <span>时事新闻时事新闻时事新闻时事</span><span class="news-time">【2014-09-18】</span>
                        </div>
                        <div class="more-item">
                            <span>时事新闻时事新闻时事新闻时事</span><span class="news-time">【2014-09-18】</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
        <div class="foot">
            <div class="foot-top">
                <div class="fitem">
                    <img src="/static/img/logo1.png"><span>家庭式日用品一站式采购</span>
                </div>
                <div class="fitem">
                    <img src="/static/img/logo2.png"><span>严筛精选，品质保证</span>
                </div>
                <div class="fitem">
                    <img src="/static/img/logo3.png"><span>厂家直货，为您省钱</span>
                </div>
                <div class="fitem">
                    <img src="/static/img/logo4.png"><span>货到付款，零风险承诺</span>
                </div>
            </div>
            <div class="foot-bottom">
                <div class="blist">
                    <div class="bitem">
                        <h5>购物保障</h5>
                        <ul>
                            <li>条款承诺</li>
                            <li>退换货政策</li>
                            <li>商品退换货流程</li>
                        </ul>
                    </div>
                    <div class="bitem">
                        <h5>购物保障</h5>
                        <ul>
                            <li>条款承诺</li>
                            <li>退换货政策</li>
                            <li>商品退换货流程</li>
                        </ul>
                    </div>
                    <div class="bitem">
                        <h5>购物保障</h5>
                        <ul>
                            <li>条款承诺</li>
                            <li>退换货政策</li>
                            <li>商品退换货流程</li>
                        </ul>
                    </div>
                    <div class="bitem">
                        <h5>购物保障</h5>
                        <ul>
                            <li>条款承诺</li>
                            <li>退换货政策</li>
                            <li>商品退换货流程</li>
                        </ul>
                    </div>
                </div>
                <div class="line"></div>
                <div class="zzlogo">
                    <div class="zzgs"><img src="/static/img/webo.png">关注新浪微博</div>
                    <div class="zzgs"><img src="/static/img/lpw.png">关注腾讯微博</div>
                </div>
            </div>
        </div>
        <footer class="app_footer">
            <!-- 其它 -->
            <div class="extra">
              <div class="container">
                <div class="slogan">
                  <a href="javascript:;">
                    <i class="glyphicon glyphicon-home"></i>
                    <span>价格亲民</span>
                  </a>
                  <a href="javascript:;">
                    <i class="glyphicon glyphicon-thumbs-up"></i>
                    <span>物流快捷</span>
                  </a>
                  <a href="javascript:;">
                    <i class="glyphicon glyphicon-piggy-bank"></i>
                    <span>品质新鲜</span>
                  </a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                  <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                  </p>
                </div>
              </div>
            </div>
        </footer>
    </div>
</body>

</html>

<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/wow.min.repeat.js"></script>
<script src="/static/js/swiper-bundle.min.js"></script>
<script src="/static/js/less.js"></script>
<script>
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }

    })

</script>